<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像分割</title>
    <!-- 引入外部CSS样式 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/seg_obj_style.css') }}">
    <!-- 引入外部JavaScript脚本 -->
    <script src="{{ url_for('static', filename='js/segmentation.js') }}" defer></script>
    <style>
        .loader {
            border: 8px solid #f3f3f3;
            border-top: 8px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
            display: none;
            margin: auto;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>

<body>
<!-- 主容器 -->
<div class="container">
    <!-- 页头区域 -->
    <header>
        <h1 >基于YOLO 11的图像分割</h1>
        <p >上传图像或视频开始分割</p>
    </header>

    <!-- 主内容区域，包含两个展示窗口 -->
    <div class="main-content">
        <!-- 左侧：显示原始图片/视频 -->
        <div class="display-window" id="original-display">
            <h3>文件</h3>
            <video id="original-video" controls autoplay preload="auto" hidden></video> <!-- 视频控件（初始隐藏） -->
            <img id="original-image" alt="Original" hidden> <!-- 图片控件（初始隐藏） -->
        </div>

        <!-- 右侧：显示分割结果图片/视频 -->
        <div class="display-window" id="segmented-display">
            <h3>结果</h3>
            <img id="segmented-image" alt="Segmented" hidden>
            <canvas id="frame-canvas" hidden></canvas>
        </div>
    </div>



    <div class="buttons-container">
        <label  class="custom-file-upload" for="file-upload">
            <input type="file" class="custom-file-input">
            选择文件
        </label>
        <button  id="start-segmentation" >开始</button>
    </div>

    <!-- 文件输入框，隐藏但功能正常 -->
    <input type="file" id="file-upload" accept="image/*,video/*" class="custom-file-input">
    <div class="loader" id="loader"></div>



    <!-- 底部统计信息栏 -->
    <div class="statistics-panel">
        <h3>统计</h3>
        <!-- 动态更新统计信息 -->
        <table id="statistics-list" style="border-collapse: collapse; width: 100%;">
            <thead>
            <tr>
                <th style="border: 1px solid black; background-color: white; ">对象</th>
                <th style="border: 1px solid black; background-color: white; ">数量</th>
            </tr>
            </thead>
            <tbody>
            <tr><td colspan="2" style="border: 1px solid black; text-align: center;">No data available.</td></tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>
